<template>
	<view class="" style="overflow: scroll;">
		<view class="content">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="content">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="display-flex align-items">
								<view class="margin-top-05">
									<uv-icon name="arrow-left" color="#000000" size="20"></uv-icon>
								</view>
							</view>
							<view class="font-size-32 font-weight-500">
								直播间详情
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-bind:style="{height: (s+n) +'px'}">

			</view>
			<view class="padding-about-24">
				<view class="view margin-top-30 position-relative">
					<view v-if="roominfo.type == 1" class="center-size-20 label2 position-absolute"
						style="top: 0;color: #FE693E; right: 0;">
						{{roominfo.start_time}}
					</view>
					<view class="display-flex" style="padding: 24rpx;">
						<view class="yuan position-relative border-radius display-flex center align-items">
							<image :src="roominfo.images" class="border-radius" style="width: 108rpx;height: 108rpx;"
								mode=""></image>
							<view v-if="roominfo.type == 1"
								class="room-title position-absolute transform-translate-left"
								style="left: 50%;background: #FFEEEA;bottom: -5rpx;color: #FF351B;">
								预约中
							</view>
							<view v-if="roominfo.type == 2"
								class="room-title button color-FFF position-absolute transform-translate-left"
								style="left: 50%;bottom: -5rpx;">
								直播中
							</view>
						</view>
						<view class="file-1 margin-left-20">
							<view class="font-size-28 font-weight-500 ">
								{{roominfo.title}}
							</view>
							<view class="display-flex margin-top-15 align-items">
								<view class="label center-size-20 color-FFF">
									最高返
								</view>
								<view style="color: #FE693E;" class="label1 center-size-20">
									{{roominfo.rate * 100}}%
								</view>
							</view>
							<view class="font-size-22 margin-top-10 color-666 webkit-line-clamp"
								style="-webkit-line-clamp: 1;">
								{{roominfo.description}}
							</view>
							<view class="" style="height: 10rpx;">

							</view>
						</view>
					</view>
				</view>
				<view v-if="roominfo.content" class="view-miaos position-relative margin-top-20">
					<view
						class="button display-flex center align-items position-absolute color-FFF font-size-28 font-weight-500"
						style="width: 192rpx;height: 56rpx;top: 0%;left: 0;border-radius: 16rpx 0rpx 16rpx 0rpx;">
						直播间福利
					</view>
					<view class="display-flex flex-end">
						<view @click="setClipboardData(roominfo.content)"
							class="fuz display-flex margin-top-20 margin-right-20 center align-items">
							复制文案
						</view>
					</view>
					<view class="copywriting-txt">
						<text>{{roominfo.content}}</text>
					</view>
				</view>
				<view v-if="roominfo.goods" class="view margin-top-20" style="padding: 24rpx;">
					<view class="font-size-28 font-weight-500">
						直播爆品预告
					</view>
					<view class="margin-top-20">
						<scroll-view scroll-x="true" @scrolltolower="scrolltolower" class="scroll-view_H">
							<view class="" style="display: inline-block;">
								<view class="display-flex">
									<view v-for="goodsitem,goodsindex in roominfo.goods" :key="goodsindex"
										@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
										class="margin-left-20 display-flex flex-direction-column space-between">

										<view class="">
											<image :src="goodsitem.product_img_url"
												style="width: 196rpx;height: 196rpx;" class="border-radius-12" mode="">
											</image>
											<view class="font-size-28 font-weight-500 webkit-line-clamp"
												style="-webkit-line-clamp: 2;">
												{{goodsitem.product_name}}
											</view>
										</view>
										<view class="">
											<view class="margin-top-10" style="color: #FF2E38;">
												<text class="font-size-24 font-weight-bold">￥</text>
												<text
													class=" font-size-36 font-weight-bold">{{goodsitem.product_price}}</text>
											</view>
											<view
												class="display-flex margin-top-15 font-size-28 font-weight-500 align-items">
												<view
													style="color: #FF2E38;font-size: 22rpx; border: none;background: #FFEEEA;"
													class="label1 center-size-20">
													预估佣金
													¥{{goodsitem.predict_commission_amount}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="view margin-top-20" style="padding: 24rpx;">
					<view class="font-size-28 font-weight-500">
						推广教程
					</view>
					<view v-if="roominfo.type == 1" v-for="item,index in stepsYuyue" :key="index"
						class="font-size-26 margin-top-20 font-weight-500">
						{{index + 1}}、<text class="miaos">{{item}}</text>
					</view>
					<view v-else v-for="item,index in stepsLiveing" :key="index"
						class="font-size-26 margin-top-20 font-weight-500">
						{{index + 1}}、<text class="miaos">{{item}}</text>
					</view>

					<view class="display-flex center margin-top-20 align-items"
						style="background: #F5F5F5;border-radius: 24rpx;">
						<image v-if="roominfo.type == 1" src="/static/liveing.gif" style="width: 50%;margin: 20rpx;"
							mode="widthFix"></image>
						<image v-else src="/static/live.gif" style="width: 50%;margin: 20rpx;" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<div class="kong"></div>
			<div class="kong"></div>
			<view class="safe-area-inset-bottom kong">

			</view>
		</view>

		<view class="bottom " style="border-radius: 16rpx 16rpx 0 0;">
			<view v-if="roominfo.type == 1" class="padding-about-24 display-flex center align-items">
				<view @click="onCheckYuyue"
					class="button color-FFF font-size-28 font-weight-500 display-flex center align-items"
					style="height: 88rpx; width: 668rpx;">
					<text v-if="roominfo.type == 1">分享预约海报</text>
					<text v-else>分享直播海报</text>
				</view>
			</view>
			<view v-else class="padding-about-24 display-flex space-between align-items" style="margin: 0 20rpx;">
				<view @click="onCheckYuyue" class="button font-size-28 font-weight-500 display-flex center align-items"
					style="border: 2rpx solid #FFEFEC;color: #FE6047;background: #FFEFEC;height: 66rpx;">
					<text v-if="roominfo.type == 1">分享预约海报</text>
					<text v-else>分享直播海报</text>
				</view>
				<view @click="goLive(roominfo)"
					class="button margin-left-20 color-FFF font-size-28 font-weight-500 display-flex center align-items">
					去直播间
				</view>
			</view>
			<view class="safe-area-inset-bottom">

			</view>
			<!-- :type="1" -->
			<a-customAuth ref="popup" ></a-customAuth>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate,
		setClipboardData,
		debounce
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const roomId = ref('')
	const roominfo = ref({})
	const popup = ref(null)
	const stepsYuyue = [
		'点击《分享预约海报》',
		'海报转发给好友或者保存发朋友圈',
		'好友预约，开播进入直播间下单，您可拿到对应商品佣金'
	]
	const stepsLiveing = [
		'点击（去直播间）',
		'直播间点击右下角分享选择转发给朋友或分享到朋友圈注:分享朋友圈微信需8.0.56及以上版本',
		'好友下单，您可拿到对应商品佣金'
	]
	onLoad(function(option) {
		roomId.value = option.id
		getLiveInfo()
	});
	onShow(function() {});
	// 预约海报
	const onCheckYuyue = debounce(async function() {
		uni.showLoading({
			title: '正在生成海报...',
		});
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			await uni.hideLoading();
			return;
		}
		let object = {
			id: roomId.value
		}
		const {
			code,
			data
		} = await api.getliveQrcode(object)
		if (code == 0) {
			uni.downloadFile({
				url: data.url,
				success: (ress) => {
					wx.showShareImageMenu({
						path: ress.tempFilePath, //要分享的图片地址，必须为本地路径或临时路径
						success: (re) => {
							console.log({
								success: re
							})
						},
						fail: (re) => {
							console.log({
								fail: re
							})
						}
					})
				}
			})
		}
		await uni.hideLoading();
	}, 500)

	function goLive(room) {
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			return;
		}
		uni.openChannelsLive({
			promoterShareLink: room.promoter_share_link,
			feedId: room.notice_id,
			success: res => {
				console.log(res)
			},
			fail: (res) => {
				console.log(res)
			}
		})
	}
	async function getLiveInfo() {
		let object = {
			id: roomId.value
		}
		const {
			code,
			data
		} = await api.getLiveInfo(object)
		if (code == 0) {
			roominfo.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.fuz {
		width: 148rpx;
		height: 52rpx;
		border-radius: 26rpx;
		border: 2rpx solid #FE693E;
		font-size: 24rpx;
		color: #FE693E;

	}

	.view-miaos {

		// background: linear-gradient(180deg, #FFF4F2 0%, #FFFFFF 35%, #FFFFFF 100%);
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.copywriting-txt {
		padding: 20rpx;
		font-size: 28rpx;
		color: #000;
		line-height: 1.5;
	}

	.button {
		width: 300rpx;
		height: 70rpx;
		background: #FE821C;
		border-radius: 70rpx;
	}

	.miaos {
		font-size: 24rpx;
		color: #7C7C7C;
	}

	.room-title {
		width: 92rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.yuan {
		width: 124rpx;
		height: 124rpx;
		border: 2rpx solid #FE6B3C;
	}


	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.label2 {
		width: 152rpx;
		height: 40rpx;
		background: #F6F6F6;
		border-radius: 0rpx 24rpx 0rpx 12rpx;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label1 {
		// width: 68rpx;
		padding: 5rpx 10rpx;
		height: 32rpx;
		background: #FEEBEA;
		border-radius: 6rpx;

	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.content {
		width: 750rpx;
		height: 100vh;
		background: linear-gradient(180deg, #FFE7DB 0%, #FCF5F0 7%, #F5F5F5 100%);
	}
</style>